HTMX স্ক্রিপ্ট ফাইল অন্তর্ভুক্ত করা খুবই সহজ। HTMX এর জন্য স্ক্রিপ্ট ফাইল HTML ফাইলে অন্তর্ভুক্ত করার মাধ্যমে বিভিন্ন ইন্টারঅ্যাক্টিভ ফিচার ব্যবহার করা যায়। HTMX এর CDN লিংক ব্যবহার করে সরাসরি স্ক্রিপ্ট যোগ করা সম্ভব, অথবা এটি লোকাল ফাইল হিসেবেও সংযুক্ত করা যায়।
নিচে HTMX স্ক্রিপ্ট ফাইল অন্তর্ভুক্ত করার কয়েকটি উদাহরণ দেখানো হলো:
1. HTMX স্ক্রিপ্ট অন্তর্ভুক্ত করা (CDN ব্যবহার করে)
HTMX এর অফিসিয়াল CDN লিংক ব্যবহার করে HTML ফাইলে HTMX অন্তর্ভুক্ত করা যেতে পারে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMX Example with CDN</title>
<!-- HTMX CDN লিংক যুক্ত করা -->
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
</head>
<body>
<h1>HTMX CDN Example</h1>
<!-- Fetch Data Button -->
<button hx-get="/get-data" hx-target="#content">Fetch Data</button>
<div id="content">Content will be loaded here...</div>
</body>
</html>
2. HTMX স্ক্রিপ্ট অন্তর্ভুক্ত করা (লোকাল ফাইল ব্যবহার করে)
যদি HTMX স্ক্রিপ্ট ফাইল লোকাল মেশিনে সংরক্ষণ করা হয়, তাহলে এটি HTML ফাইলে অন্তর্ভুক্ত করা যায়।
প্রথমে HTMX এর সর্বশেষ htmx.min.js ফাইলটি HTMX GitHub থেকে ডাউনলোড করে প্রজেক্টের ফোল্ডারে যুক্ত করতে হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMX Example with Local File</title>
<!-- লোকাল HTMX স্ক্রিপ্ট ফাইল অন্তর্ভুক্ত করা -->
<script src="js/htmx.min.js"></script>
</head>
<body>
<h1>HTMX Local File Example</h1>
<!-- Data Fetch Button -->
<button hx-get="/fetch-info" hx-target="#info">Get Information</button>
<div id="info">Information will appear here...</div>
</body>
</html>
3. উদাহরণসহ HTMX এর সাধারণ ফিচার ব্যবহার
HTMX এর সাধারণ কিছু ফিচার এবং তাদের Attribute ব্যবহার করে HTML ফাইল কনফিগার করার উদাহরণ এখানে দেওয়া হলো।
Example 1: GET Request ব্যবহার করে Data Fetching
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMX GET Request Example</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
</head>
<body>
<h2>Fetch User Data</h2>
<!-- GET রিকোয়েস্টের উদাহরণ -->
<button hx-get="/api/user-data" hx-target="#user-info" hx-swap="innerHTML">Load User Data</button>
<div id="user-info">User data will be displayed here.</div>
</body>
</html>
ব্যাখ্যা:
- hx-get:
/api/user-dataURL এ GET রিকোয়েস্ট পাঠায়। - hx-target: রেসপন্সটি
#user-infodiv এর মধ্যে দেখানো হবে। - hx-swap:
innerHTMLব্যবহার করে#user-infoএর কন্টেন্ট আপডেট করা হবে।
Example 2: Form Submission (POST Request) ব্যবহার করে Data Submission
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMX POST Request Example</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
</head>
<body>
<h2>Submit User Data</h2>
<!-- POST রিকোয়েস্টের উদাহরণ -->
<form hx-post="/submit-user" hx-target="#result">
<label for="name">Name:</label>
<input type="text" name="name" id="name" required>
<button type="submit">Submit</button>
</form>
<div id="result">Submission result will be displayed here.</div>
</body>
</html>
ব্যাখ্যা:
- hx-post:
/submit-userURL এ POST রিকোয়েস্ট পাঠায় এবং ফর্মের ডেটা পাঠায়। - hx-target:
#resultdiv এ রেসপন্স রেন্ডার করে।
Example 3: Content Update এবং Dynamic URL Change (hx-push-url)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMX URL Push Example</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
</head>
<body>
<h2>Dynamic Content Load and URL Update</h2>
<!-- URL Update এবং Content Update এর উদাহরণ -->
<button hx-get="/new-section" hx-push-url="true" hx-target="#content">Load New Section</button>
<div id="content">Current section content...</div>
</body>
</html>
ব্যাখ্যা:
- hx-push-url: পেজের URL আপডেট করে যাতে ব্রাউজারের ব্যাক/ফরওয়ার্ড বাটন কাজ করে।
- hx-get এবং hx-target:
/new-sectionথেকে ডেটা নিয়ে#contentdiv এ রেন্ডার করে।
HTMX Attribute Reference
| Attribute | Description |
|---|---|
| hx-get | GET রিকোয়েস্ট পাঠায় এবং ডেটা ফেচ করে |
| hx-post | POST রিকোয়েস্ট পাঠায় এবং ডেটা সাবমিট করে |
| hx-put | PUT রিকোয়েস্ট পাঠায় ডেটা আপডেট করার জন্য |
| hx-delete | DELETE রিকোয়েস্ট পাঠায় ডেটা মুছে ফেলার জন্য |
| hx-swap | নির্দিষ্ট HTML এলিমেন্টে ডেটা আপডেট করতে ব্যবহৃত হয় |
| hx-target | নির্দিষ্ট DOM এলিমেন্টে রেসপন্স আপডেট করতে ব্যবহৃত হয় |
| hx-trigger | নির্দিষ্ট ইভেন্টে রিকোয়েস্ট পাঠায় |
| hx-push-url | URL আপডেট করতে এবং ব্রাউজার নেভিগেশনে সহায়ক |
উপসংহার
HTMX স্ক্রিপ্ট ফাইল অন্তর্ভুক্ত করা খুবই সহজ। CDN লিংক ব্যবহার করে সরাসরি HTMX অন্তর্ভুক্ত করা যায় বা HTMX এর লোকাল ফাইল ব্যবহার করেও অন্তর্ভুক্ত করা সম্ভব। HTMX ব্যবহার করে HTML Attributes এর মাধ্যমে AJAX, Dynamic Content Loading, এবং URL Management করা যায়, যা ওয়েব ডেভেলপমেন্টে সময় বাঁচায় এবং কোড সরল রাখে।
Read more
